<template>
  <div class="tabbar">
    <!-- 设置背景色 -->
    <div class="all">
      <!-- 顶部分割线 -->
      <div class="line"></div>
      <div class="content-item">
          <!-- 占位 tbabar 内容 -->
        <slot></slot>
      </div>
    </div>
  </div>
</template>


<script>
// 引入要使用的组件
//import Home from '@/components/HelloWorld'

export default {
  name: "xxx",
  data() {
    return {
      // 数据初始化  init
      msg: "tabbar"
    };
  },
  methods: {
    // 所有方法在这里实现
    //clickAction(){
    //我是例子
    //}
  },
  mounted() {
    //获取 DOM 节点 == viewDidLoad
  },
  props: {
    //给父类传值
  }
};
</script>
<style scoped>
/* 样式处理 */
.all {
  background-color: gainsboro;
  width: 100%;
  height: 100%;
}
.line {
  background-color: gray;
  height: 0.5px;
}

.tabbar {
  position: fixed;
  /* bottom: 0px; */
  left: 0px;
  background-color: #222fff;
  height: 49px;
  bottom: 0px;
  width: 100%;
}
.content-item{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 100%;
}
</style>